import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useTheme } from '../../hooks/useTheme';
import { createCommonStyles } from '../../styles/commonStyles';

/**
 * 计划项组件
 */
const PlanItem = ({ plan, onToggle, onPress, onEdit, onDelete, showActions = true, canDelete = true, canEdit = true }) => {
  const { theme } = useTheme();
  const dynamicStyles = createCommonStyles(theme);
  const isCompleted = plan.status === 'completed';

  const handleToggle = (e) => {
    e.stopPropagation();
    if (onToggle) {
      onToggle();
    }
  };

  const handleEdit = (e) => {
    e.stopPropagation();
    if (onEdit) {
      onEdit();
    }
  };

  const handleDelete = (e) => {
    e.stopPropagation();
    if (onDelete) {
      onDelete();
    }
  };

  return (
    <TouchableOpacity 
      style={[
        dynamicStyles.card,
        { backgroundColor: theme.colors.card },
        isCompleted && styles.completedContainer
      ]} 
      onPress={onPress}
      activeOpacity={0.7}
    >
      <View style={styles.content}>
        <View style={styles.row}>
          {/* 复选框 */}
          <TouchableOpacity 
            style={[
              styles.checkbox,
              { borderColor: theme.colors.border },
              isCompleted && [styles.checkboxChecked, { backgroundColor: theme.colors.success, borderColor: theme.colors.success }]
            ]}
            onPress={handleToggle}
            activeOpacity={0.7}
          >
            {isCompleted && <Text style={styles.checkmark}>✓</Text>}
          </TouchableOpacity>
          
          {/* 计划内容 */}
          <View style={styles.textContainer}>
            <Text style={[
              styles.title,
              { color: theme.colors.text },
              isCompleted && [styles.completedTitle, { color: theme.colors.textSecondary }]
            ]}>
              {plan.title}
            </Text>
            {plan.description && (
              <Text style={[
                styles.description,
                { color: theme.colors.textSecondary },
                isCompleted && styles.completedDescription
              ]}>
                {plan.description}
              </Text>
            )}
          </View>

          {/* 操作按钮 */}
          {showActions && (
            <View style={styles.actions}>
              {onEdit && canEdit && (
                <TouchableOpacity 
                  style={[styles.actionButton, { backgroundColor: theme.colors.surface }]}
                  onPress={handleEdit}
                  activeOpacity={0.7}
                >
                  <Text style={[styles.actionText, { color: theme.colors.primary }]}>编辑</Text>
                </TouchableOpacity>
              )}
              {onEdit && !canEdit && (
                <TouchableOpacity 
                  style={[styles.actionButton, { backgroundColor: theme.colors.surface, opacity: 0.5 }]}
                  disabled={true}
                  activeOpacity={0.7}
                >
                  <Text style={[styles.actionText, { color: theme.colors.textSecondary }]}>编辑</Text>
                </TouchableOpacity>
              )}
              {onDelete && canDelete && (
                <TouchableOpacity 
                  style={[styles.actionButton, styles.deleteButton, { backgroundColor: theme.colors.error + '20' }]}
                  onPress={handleDelete}
                  activeOpacity={0.7}
                >
                  <Text style={[styles.actionText, styles.deleteText, { color: theme.colors.error }]}>删除</Text>
                </TouchableOpacity>
              )}
              {onDelete && !canDelete && (
                <TouchableOpacity 
                  style={[styles.actionButton, styles.deleteButton, { backgroundColor: theme.colors.surface, opacity: 0.5 }]}
                  disabled={true}
                  activeOpacity={0.7}
                >
                  <Text style={[styles.actionText, styles.deleteText, { color: theme.colors.textSecondary }]}>删除</Text>
                </TouchableOpacity>
              )}
            </View>
          )}
        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  completedContainer: {
    opacity: 0.6,
  },
  content: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'flex-start',
  },
  checkbox: {
    width: 24,
    height: 24,
    borderRadius: 12,
    borderWidth: 2,
    marginRight: 12,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 2,
  },
  checkboxChecked: {},
  checkmark: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: 'bold',
  },
  textContainer: {
    flex: 1,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 4,
  },
  completedTitle: {
    textDecorationLine: 'line-through',
  },
  description: {
    fontSize: 14,
  },
  completedDescription: {},
  actions: {
    flexDirection: 'row',
    marginLeft: 8,
    gap: 8,
  },
  actionButton: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 6,
  },
  deleteButton: {},
  actionText: {
    fontSize: 12,
    fontWeight: '500',
  },
  deleteText: {},
});

export default PlanItem;

